import 'package:flutter/material.dart';
import 'package:flutter_changdian_football/pages/mine/user_store.dart';
import 'package:flutter_changdian_football/routers/app_routes.dart';
import 'package:flutter_changdian_football/utils/str_utils.dart';
import 'package:flutter_changdian_football/widget/extended_image_slide_widget.dart';
import 'package:flutter_changdian_football/widget/screenutil/custom_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';

// 我的
class MinePage extends StatelessWidget {
  const MinePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xfff8faf9),
      body: GetBuilder<UserStore>(
        builder: (userStore) {
          return Stack(
            children: [
              SizedBox(
                width: double.infinity,
                height: 210.w,
                child: Image.asset(
                  'assets/images/img_me_bg.png',
                  width: double.infinity,
                  fit: BoxFit.fill,
                ),
              ),

              Container(
                margin: EdgeInsets.only(left: 17.w, right: 17.w, top: 108.w),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(16.r),
                ),
                width: double.infinity,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    SizedBox(height: 20.w,),

                    _infoAvatarWidget(userStore),

                    SizedBox(height: 26.w,),

                    _userOtherInfoWidget(userStore),

                    SizedBox(height: 16.w,),

                    Container(
                      width: double.infinity,
                      height: 0.5.w,
                      margin: EdgeInsets.symmetric(horizontal: 16.w),
                      color: const Color(0xffF0F0F0),
                    ),

                    SizedBox(height: 26.w,),

                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 16.w),
                      child: Row(
                        children: [
                          Expanded(
                            child: _textIconWidget(text: '我的钱包', icon: 'assets/images/icon_me_qb.png', onTap: () {
                              if (userStore.checkLoginPage()) {
                                Get.toNamed(AppRoutes.myPurse);
                              }
                            }),
                          ),
                          SizedBox(width: 11.w,),
                          Expanded(
                            child: _textIconWidget(text: '比赛记录', icon: 'assets/images/icon_me_jl.png', onTap: () {
                              if (userStore.checkLoginPage()) {
                                Get.toNamed(AppRoutes.gameRecord, parameters: {
                                  'isMy': 'Y'
                                });
                              }
                            }),
                          ),
                        ],
                      ),
                    ),

                    SizedBox(height: 21.w,),

                    Container(
                      alignment: Alignment.centerLeft,
                      padding: EdgeInsets.symmetric(horizontal: 16.w),
                      child: Text('常用功能', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold, color: const Color(0xff333333)),),
                    ),

                    SizedBox(height: 17.w,),

                    MasonryGridView.count(
                      shrinkWrap: true,
                      crossAxisCount: 3,
                      mainAxisSpacing: 14.w,
                      crossAxisSpacing: 31.w,
                      padding: const EdgeInsets.only(left: 16, right: 16),
                      itemCount: userStore.commonFunList.length,
                      physics: const NeverScrollableScrollPhysics(),
                      itemBuilder: (context, index) {
                        return GestureDetector(
                          behavior: HitTestBehavior.translucent,
                          onTap: () {
                            userStore.toPage(index);
                          },
                          child: Column(
                            children: [
                              SizedBox(
                                width: 44.w,
                                height: 44.w,
                                child: Image.asset(
                                  userStore.commonFunList[index]['icon']
                                ),
                              ),

                              SizedBox(
                                child: Text(userStore.commonFunList[index]['text'], style: TextStyle(fontSize: 12.sp, color: const Color(0xff323232)),),
                              )
                            ],
                          ),
                        );
                      },
                    ),

                    SizedBox(height: 22.w,)
                  ],
                ),
              )
            ],
          );
        }
      ),
    );
  }

  // 用户头像信息
  _infoAvatarWidget(UserStore userStore) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        if (userStore.checkLoginPage() == true) {

        }
      },
      child: Container(
        padding: EdgeInsets.only(left: 16.w),
        child: Row(
          children: [
            GestureDetector(
              behavior: HitTestBehavior.translucent,
              onTap: () {
                if (userStore.selfCenterModel?.imgUrl != null) {
                  Get.to(
                    ExtendedImageSlideWidget(
                      url: "${userStore.selfCenterModel?.imgUrl ?? ''}",
                    ),
                    opaque: false
                  );
                }
              },
              child: Container(
                width: 50.w,
                height: 50.w,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(50.r)
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(50.r),
                  child: userStore.isLogin == true ? Image.network(userStore.selfCenterModel?.imgUrl ?? '', fit: BoxFit.fill,) : Image.asset('assets/images/logo_gr.png', fit: BoxFit.fill,),
                )
              ),
            ),
            SizedBox(width: 8.w,),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  if (userStore.isLogin == true) ...[
                    SizedBox(
                      child: Row(
                        children: [
                          Text(userStore.selfCenterModel?.nickname ?? '', style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold, color: const Color(0xff333333)),),
                          SizedBox(width: 8.w,),
                          SizedBox(
                            width: 16.w,
                            height: 16.w,
                            child: Image.asset(StrUtils.getSexImage(userStore.selfCenterModel?.sex ?? 0)),
                          )
                        ],
                      ),
                    ),
    
                    SizedBox(height: 4.w,),
    
                    SizedBox(
                      width: 68.w,
                      height: 16.w,
                      child: Image.asset(StrUtils.getLevelImage(userStore.selfCenterModel?.grade ?? 1)),
                    )
                  ] else ...[
                    Text('立即登录', style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold, color: const Color(0xff333333)),),
                  ]
                ],
              ),
            ),
    
            GestureDetector(
              behavior: HitTestBehavior.translucent,
              onTap: () {
                if (userStore.checkLoginPage()) {
                  Get.toNamed(AppRoutes.personalInfo);
                }
              },
              child: Container(
                decoration: BoxDecoration(
                  color: const Color(0xffFCAB08),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25.r),
                    bottomLeft: Radius.circular(25.r)
                  )
                ),
                padding: EdgeInsets.symmetric(vertical: 4.w, horizontal: 10.w),
                child: Row(
                  children: [
                    Text('个人信息', style: TextStyle(fontSize: 13.sp, color: Colors.white),),
                    SizedBox(width: 2.w,),
                    Container(
                      margin: EdgeInsets.only(top: 1.w),
                      width: 10.w,
                      height: 10.w,
                      child: Image.asset('assets/images/info_right.png'),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 用户其他信息
  _userOtherInfoWidget(UserStore userStore) {
    return SizedBox(
      child: Row(
        children: [
          Expanded(
            child: _topAndBottomWidget(text: '比赛', val: '${userStore.selfCenterModel?.matchCount ?? 0}'),
          ),
          Expanded(
            child: _topAndBottomWidget(text: '获赞', val: '${userStore.selfCenterModel?.praisedCount ?? 0}'),
          ),
          Expanded(
            child: _topAndBottomWidget(text: '被关注', val: '${userStore.selfCenterModel?.focusCount ?? 0}'),
          ),
          Expanded(
            child: _topAndBottomWidget(text: '水率', val: '${userStore.selfCenterModel?.breakAppointmentRate ?? '0%'}'),
          ),
        ],
      ),
    );
  }

  _topAndBottomWidget({
    String text = '',
    String val = ''
  }) {
    return Column(
      children: [
        SizedBox(
          child: Text(val, style: TextStyle(fontSize: 20.sp, fontWeight: FontWeight.w500, color: const Color(0xff333333)),),
        ),
        SizedBox(
          child: Text(text, style: TextStyle(fontSize: 12.sp, color: const Color(0xff999999)),),
        )
      ],
    );
  }

  _textIconWidget({
    String text = '',
    String icon = '',
    Function? onTap
  }) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        onTap?.call();
      },
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 13.w, horizontal: 16.w),
        decoration: BoxDecoration(
          image: DecorationImage(image: AssetImage(icon))
        ),
        child: Row(
          children: [
            SizedBox(
              width: 36.w,
              height: 36.w,
            ),
            SizedBox(width: 14.w,),
    
            SizedBox(
              child: Text(text, style: TextStyle(fontSize: 15.sp, fontWeight: FontWeight.w500, color: const Color(0xff333333)),),
            )
          ],
        ),
      ),
    );
  }

}